<!-- eslint-disable camelcase -->
<script setup>
import { useStore } from 'vuex'
import { ref, onMounted, provide, getCurrentInstance } from 'vue'
import axios from 'axios'
import router from '../router/router'
import storage from '../utils/storage'
import SingleRoom from '../components/singleRoom.vue'
import GroupRoom from '../components/GroupRoom.vue'

const store = useStore()
const username = ref(store.state.userStore.userInfo.data.username)
const avatarUrl = ref(store.state.userStore.userInfo.data.avatarUrl)
const userId = ref(store.state.userStore.userInfo.data.userId)
const friendlist = ref([])
const ifvisable = ref(false)
const active = ref(-1)
const touser = ref()
const touserId = ref()
const touseravatarUrl = ref()
const groupName = ref()
const groupAvatarUrl = ref()
const ifvisablegroup = ref(false)
const { proxy } = getCurrentInstance()
const socket = ref(proxy.$webSocketService.socket)
const userinfo = ref({
  nameinfo: username
})
onMounted(() => {
  socket.value.send(JSON.stringify(userinfo.value))
  getfriend()
})

const getfriend = () => {
  axios.get('api/usercontroller/user/' + userId.value).then(res => {
    friendlist.value = res.data
    console.log(friendlist.value)
    axios.get('api/groupcontroller/group/' + username.value).then(res => {
      friendlist.value.push(res.data)
    })
  })
}

const exit = () => {
  storage.clearAll()
  router.push('/')
}

const visable = (index) => {
  if (friendlist.value[index].username) {
    ifvisablegroup.value = false
    ifvisable.value = true
    active.value = index
    touser.value = friendlist.value[index].username
    touseravatarUrl.value = friendlist.value[index].avatarUrl
    touserId.value = friendlist.value[index].userId
  }
}

const visablegroup = (index) => {
  ifvisable.value = false
  ifvisablegroup.value = true
  active.value = index
  groupName.value = friendlist.value[index].groupName
  groupAvatarUrl.value = friendlist.value[index].groupAvatarUrl
}

provide('touser', touser)
provide('touseravatarUrl', touseravatarUrl)
provide('groupName', groupName)
</script>

<template>
  <el-container class="home_container">

    <el-header id="topbar">
      <el-row>
        <el-col :span="4" class="topbar-left">
          <span class="title" @click="index()">IM-SYSTEM</span>
        </el-col>
        <el-col :span="20" class="topbar-right">
          <i class="el-icon-menu" @click="toggle()"></i>
          <div class="user">

            <img :src="'src/' + avatarUrl" class="user-img" ref="img" @click="showSetting()" />
            <li class="right">
              <el-dropdown>
                <span class="el-dropdown-link">
                  <div class="box"> <a href="javacript:;">{{ username }}</a></div>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>
                      <p @click="manage()">管理中心</p>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <p class="exit" @click="exit()">退出</p>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </li>
          </div>
        </el-col>
      </el-row>
    </el-header>

    <el-container>
      <el-aside width="200px" class="left">
        <div class="aside" :class="active != index ? 'aside1' : 'aside2'" v-for="(item, index) in friendlist" :key="index"
          @click="visable(index)" v-show="item.username">
          <div class="img"><img :src="'src/' + item.avatarUrl" class="friend-img" ref="img" /></div>
          <div class="username">{{ item.username }}</div>
        </div>
        <div class="aside" :class="active != index ? 'aside1' : 'aside2'" v-for="(item, index) in friendlist" :key="index"
          @click="visablegroup(index)" v-show="item.groupName">
          <div class="img"><img :src="'src/' + item.groupAvatarUrl" class="friend-img" ref="img" /></div>
          <div class="username">{{ item.groupName }}</div>
        </div>
      </el-aside>
      <el-main v-show="ifvisable">
        <SingleRoom></SingleRoom>
      </el-main>
      <el-main v-show="ifvisablegroup">
        <GroupRoom></GroupRoom>
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
.box {
  padding-bottom: 10px;
  padding-top: 5px;
}

.box a {
  color: #000;
  ;
}

.index {
  margin-left: 70px;

}

.home_container {
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%
}

.box {
  margin-top: 25px;

}

.box a {
  text-decoration: none;
  font-size: x-large;
  color: aquamarine;
}

.right .icon {
  margin-right: 6px;

}

.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s;
}

.fade-enter,
.fade-leave-to

/* .fade-leave-active below version 2.1.8 */
  {
  opacity: 0;
}

#topbar {
  position: relative;
  z-index: 10;
  background-color: #124280;
  height: 80px;
  line-height: 80px;
  color: #fff;
  box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.5);
}

#topbar .topbar-left {
  height: 80px;
  display: flex;
  justify-content: center;
  background: rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.topbar-left .icon-kaoshi {
  font-size: 60px;
}

.topbar-left .title {
  font-size: 20px;
  cursor: pointer;
}

.topbar-right {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topbar-right .user-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.topbar-right .el-icon-menu {
  font-size: 30px;
  margin-left: 20px;
}

.topbar-right .user {
  position: relative;
  margin-right: 40px;
  display: flex;
}

.topbar-right .user .user-img {
  margin-top: 15px;
  margin-left: 10px;
  cursor: pointer;
}

.user .out {
  font-size: 14px;
  position: absolute;
  top: 80px;
  right: 0px;
  background-color: #fff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding: 12px;
}

.user .out ul {
  list-style: none;
}

.user .out ul>li {
  height: 26px;
  line-height: 26px;
}

.left {
  background-color: #94b6e3;
  width: 210px;
}

.aside1 {
  border-bottom: solid 0.5px rgba(0, 0, 0, 0.066);
  height: 80px;
  text-align: center;

  display: flex;
}

.aside2 {
  background-color: #9b3838;
  border-bottom: solid 0.5px rgba(0, 0, 0, 0.066);
  height: 80px;
  text-align: center;
  display: flex;
}

.friend-img {
  flex: 1;
  width: 95px;
  height: 80px;
}

.username {
  flex: 1;
  text-align: left;
  padding-left: 25px;
  margin-top: 10px;
}
</style>
